<template>
  <div id="noticeDetails" class="app-container common-main-container scrollbar-no-width content-container">
    <div style="position: relative;">
      <div id="printBox" class="notice-body">
        <div class="title">{{ noticeDetails.noticeTitle }}</div>
        <div class="subDesc">
          <span class="color-primary">{{ noticeDetails.noticeType===1 ? '通知公告' : '系统消息' }}</span>
          {{ noticeDetails.createdBy | optionUserFormat }}  {{ noticeDetails.gmtCreated | formatDate(T.DATE_TIME_FMT) }}
        </div>
        <div class="content" v-html="noticeDetails.noticeContent" />
        <div v-if="noticeDetails.noticeFile">
          <div>附件：共<span class="color-primary">{{ noticeDetails.noticeFile.split(',').length }}</span>个附件</div>
          <FileItem :files="noticeDetails.noticeFile.split(',')" />
        </div>
      </div>
      <div class="print">
        <i class="el-icon-printer color-primary common-cursor" @click="$print('printBox')" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      noticeDetails: {}
    }
  },
  computed: {
  },
  created() {
    this.loadNoticeDetails()
  },
  destroyed() {
    this.$store.dispatch('notifyUpdateNoticeData', false)
    var type = 'notice'
    if (this.noticeDetails) {
      if (this.noticeDetails.noticeType === 1) {
        type = 'notice'
      }
      if (this.noticeDetails.noticeType === 2) {
        type = 'system'
      }
    }
    this.$store.dispatch('updateMyMsgType', type)
  },
  methods: {
    loadNoticeDetails() {
      if (!this.$route.query.id) {
        this.handleGoBack()
        return
      }
      this.$store.dispatch('getNoticeSendById', this.$route.query.id).then(res => {
        if (!res) {
          this.handleGoBack()
          return
        }
        this.noticeDetails = res
        if (res.readFlag === 0) {
          this.noticeSetAsRead(res.id)
        }
      }).catch((_) => {})
    },
    noticeSetAsRead(id) {
      this.$store.dispatch('noticeSetAsRead', id).then(res => {
        this.$store.dispatch('notifyUpdateNoticeData', true)
      }).catch((_) => {})
    },
    handleGoBack() {
      this.$modal.msgWarning('无效的参数')
      setTimeout(() => {
        this.$router.push({ name: 'messageIndex' })
        const view = this.$route
        delete view.icon
        this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {})
      }, 2000)
    }
  }
}
</script>
<style scoped lang="scss">
@page {
  size: auto A4 landscape;
  margin: 3mm;
}
#noticeDetails{
  width: 1000px;
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .print{
    text-align: right;
    position: absolute;
    top: 50px;
    left: 0px;
    right: 12px;
    i{
      font-size: 2.5em;
    }
  }
}

</style>
